<template>
    <div class="phone-else">
         <div class="phone-tc">
            <span class="one">套餐</span>
            <div class="tc">
                <div class="tc-two">单品</div>
                <div class="tc-two">路由套餐</div>
                <div class="tc-two">自选优惠搭配</div>
            </div>
         </div>
         <div class="phone-num">
            <span class="one">数量</span>
            <div class="sl">
                <button @click="prev" :disabled="this.num <2">-</button>
                {{num}}
                <button @click="add" :disabled="this.num > 1">+</button>
            </div>
         </div>
         <div class="phone-bz">
            <span class="one">保障</span>
            <div class="bz">
                <span>选购</span>
                <span>意外保护</span>
                <span>延长保修</span>
            </div>
         </div>
         <div class="phone-mx">
            <span class="one">免息</span>
            <div class="mx">
                信用卡/花呗/掌上生活分期直购，最高享12期...
            </div>
         </div>
         <!-- <div class="phone-sz">
            <span class="one">送至</span>
            
         </div>
         <div class="phone-fw">
            <span class="one">服务</span>
         </div> -->
    </div>
</template>

<script>
export default {
    data(){
        return {
            num:1
        }
    },
    methods:{
        prev(){
            this.num --
        },
        add(){
            this.num ++ 
        }
    }
}
</script>

<style scoped> 
   .phone-else{
        width: 100%;
        padding: .7161rem 1.0416rem .7161rem 1.0416rem;
        display: flex;
        flex-direction: column;
   }
   .phone-else .one{
        display: block;
        width: 2.2131rem;
        color: #333;
        font-weight: 700;
        padding-right: .1rem;
        font-size: .8rem;
   }
   .phone-tc{
       display: flex;
       height: 2.8319rem;

   }
   .phone-tc .tc{
       display: flex;
       
   }
   .phone-tc .tc .tc-two{
       padding: .2125rem;
        /* color: rgb(76, 129, 243); */
        font-size: .5rem;
        border: 1px solid #333;
        border-radius: .875rem;
        text-align: left;
        margin-bottom: 1.125rem;
        margin-right: .4125rem;
   }
   .phone-tc .tc .tc-two:hover{
        color: rgb(76, 129, 243);
        border: 1px solid rgb(76, 129, 243);
   }
   .phone-else .phone-num,
   .phone-else .phone-bz,
   .phone-else .phone-mx{
    display: flex;
    height: 2.5rem;
    align-items: center;
    border-bottom: 1px solid rgb(217, 217, 217);
   }
   .phone-else .sl button{
    width: 1.5619rem;
    height: 1.5619rem;
    border-radius: 50%;
    /* border: 0; */
   }
   .phone-else .phone-bz .bz{
    display: flex;
   }
   .phone-else .phone-bz .bz span{
    font-size: .6rem;
    height: 1.2719rem;
    width: 3.75rem;
    display: block;
    text-align: center;
    /* line-height: 3.7694rem; */
    border: 1px solid rgb(214, 213, 213);
    margin-right: .3125rem;
   }
   .phone-else .mx{
    font-size: .6rem;
   }
   .phone-else .phone-sz{
    display: flex;
    height: 8.35rem;
   }
</style>